﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <link href="/bootstrap-3.4.1-dist/css/bootstrap.min.css" rel="stylesheet" />

</head>
<body>
    <div class="page-header">
        <h3>用户管理</h3>
    </div>
    <form class="form-inline">

        <div class="input-group">
            <input id="txt_name" class="form-control" />
            <span class="input-group-btn">
                <button class="btn btn-primary" onclick="Select()" type="button">
                    查询
                </button>
            </span>
        </div>



        <button type="button" class="btn btn-success" onclick="location.href = 'Add.html' ">添加用户</button>
        <button type="button" class="btn btn-danger" onclick="DelBatch()">批量删除</button>
    </form>
    <br />
    <table class="table table-bordered">
        <thead>
            <tr>
                <th> <input type="checkbox" onchange="ckChange(this)" /></th>
                <th>编号</th>
                <th>姓名</th>
                <th>性别</th>
                <th>手机</th>
                <th>出生日期</th>
                <th>部门</th>
                <th>角色</th>
                <th>状态</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody>
        </tbody>
    </table>

    <!-- 分页 -->
    <ul class="pagination">
    </ul>




    <script src="/Static/Script/jquery-3.7.0.min.js"></script>
    <script type="text/javascript">

        var page = 1;
        var size = 4;

        function Select() {
            $("table tbody").empty();
            $.get(
                "/Ajax/UsersHandler.ashx?type=list",
                { name: $("#txt_name").val(), page: page, size: size },
                function (res) {
                    //console.log(res);
                    res.data.forEach(function (v) {

                        //循环添加行
                        var $li = $("<tr>").appendTo($("table tbody"));

                        //依次添加列
                        $("<td>").html('<input type="checkbox"value="' + v.UserID + '"/>').appendTo($li);
                        $("<td>").text(v.UserID).appendTo($li);
                        $("<td>").text(v.Name).appendTo($li);
                        $("<td>").text(v.Sex).appendTo($li);
                        $("<td>").text(v.Phone).appendTo($li);
                        $("<td>").text(v.Birthday.substr(0, 10)).appendTo($li);
                        $("<td>").text(v.DeptName).appendTo($li);
                        $("<td>").text(v.RoleName).appendTo($li);
                        $("<td>").html(v.Status ? '<lable class="label label-success">正常</lable>' : '<lable class="label label-danger">冻结</lable>').appendTo($li);

                        var $td = $("<td>").appendTo($li);

                        var $upbtn = $("<button class='btn btn-warning btn-sm' style='margin-right:10px;'>").text("修改").click(function () {
                            var id = $(this).closest("tr").find("td:eq(1)").text();
                            location.href = "Edit.html?id=" + id;
                        }).appendTo($td);

                        var $delbtn = $("<button class='btn btn-danger btn-sm'>").text("删除").click(function () {
                            var id = $(this).closest("tr").find("td:eq(1)").text();
                            var name = $(this).closest("tr").find("td:eq(2)").text();
                            if (confirm("确定删除【" + name + "】么？")) {
                                $.post("/Ajax/UsersHandler.ashx?type=delete", { id: id }, function (res) {
                                    console.log(res);
                                    if (res.code == 1) {
                                        alert(res.msg);
                                        //刷新
                                        Select();
                                    } else {
                                        alert(res.msg);
                                    }
                                })
                            }
                        }).appendTo($td);

                    })

                    //活分页
                    var countpage = Math.ceil(res.count / size);
                    //alert(countpage);
                    $(".pagination").empty();
                    //上一页
                    $('<li><a href="javascript:void(0);">&laquo;</a></li>').click(function () {
                        if (page > 1) {
                            page--;
                            Select();
                        }
                    }).appendTo($(".pagination"));

                    //数字页
                    for (let i = 1; i <= countpage; i++) {
                        var $numli = $('<li><a href="javascript:void(0);">' + i + '</a></li>')
                            .click(function () {
                                page = i;
                                Select();
                            })
                            .appendTo($(".pagination"));
                        if (i == page)
                            $numli.addClass("active");
                    }

                    //下一页
                    $('<li><a href="javascript:void(0);">&raquo;</a></li>').click(function () {
                        if (page < countpage) {
                            page++;
                            Select();
                        }

                    }).appendTo($(".pagination"));
                });

        }

        Select();

        //批量删除
        function DelBatch() {

            //获取选中的行 的checkbox

            var $cks = $("tbody input[type=checkbox]:checked");

            if ($cks.length == 0) {
                alert("请选择需要删除的用户！");
                return;  //到此返回 结束
            }

            var ids = "";
            var names = "";
            $.each($cks, function (i, v) {
                ids += ids.length > 0 ? "," + $(v).val() : $(v).val();
                names += names.length > 0 ? "," + $(v).closest("tr").find("td:eq(2)").text() : $(v).closest("tr").find("td:eq(2)").text();

            })

            if (confirm("确定删除【" + names + "】么？")) {
                $.post("/Ajax/UsersHandler.ashx?type=delbatch", { ids: ids }, function (res) {
                    console.log(res);
                    if (res.code == 1) {
                        alert(res.msg);
                        //刷新
                        Select();
                    } else {
                        alert(res.msg);
                    }
                })
            }
        }

        function ckChange(that) {
            $("tbody input[type=checkbox]").prop("checked", that.checked)
        }
    </script>
</body>
</html>